import { Metadata } from 'next';
import Link from 'next/link';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import {
  ArrowLeft,
  CreditCard,
  Clock,
  Zap,
  Shield,
  DollarSign,
  BarChart3,
  CheckCircle,
  Users,
  Globe,
  Smartphone,
  Server,
  Database,
  Network,
  AlertCircle,
  TrendingUp,
  Target,
} from 'lucide-react';

export const metadata: Metadata = {
  title: '互联网金融支付系统案例 | CActor框架',
  description:
    '了解CActor框架如何帮助金融科技公司构建高并发分布式支付系统，支持日处理1000万+交易。',
};

/**
 * 项目关键指标数据
 */
const keyMetrics = [
  {
    icon: BarChart3,
    label: '日处理量',
    before: '200万笔',
    after: '1000万+笔',
    improvement: '400%',
    color: 'text-green-600',
  },
  {
    icon: Clock,
    label: '响应时间',
    before: '500ms',
    after: '<100ms',
    improvement: '80%',
    color: 'text-blue-600',
  },
  {
    icon: Shield,
    label: '系统可用性',
    before: '99.5%',
    after: '99.95%',
    improvement: '0.45%',
    color: 'text-purple-600',
  },
  {
    icon: Globe,
    label: '支付渠道',
    before: '15个',
    after: '50+个',
    improvement: '233%',
    color: 'text-orange-600',
  },
];

/**
 * 支付场景覆盖
 */
const paymentScenarios = [
  {
    name: '移动支付',
    description: '支持微信、支付宝等主流移动支付方式',
    volume: '60%',
    icon: Smartphone,
    features: ['扫码支付', 'NFC支付', '生物识别'],
  },
  {
    name: '网银支付',
    description: '对接各大银行网银系统，支持大额转账',
    volume: '25%',
    icon: CreditCard,
    features: ['快捷支付', '网银直连', '代扣代付'],
  },
  {
    name: '企业支付',
    description: '为B2B场景提供批量支付和对账服务',
    volume: '10%',
    icon: Server,
    features: ['批量转账', '自动对账', '资金归集'],
  },
  {
    name: '跨境支付',
    description: '支持多币种跨境支付和汇率转换',
    volume: '5%',
    icon: Globe,
    features: ['多币种', '实时汇率', '合规报告'],
  },
];

/**
 * 技术架构层次
 */
const architectureLayers = [
  {
    name: '接入层',
    description: '统一API网关，支持多种接入方式',
    components: ['API网关', '负载均衡', '限流熔断', '安全认证'],
    icon: Network,
  },
  {
    name: '业务层',
    description: '核心支付业务逻辑处理',
    components: ['支付路由', '风控引擎', '账务处理', '对账系统'],
    icon: Server,
  },
  {
    name: '渠道层',
    description: '对接各种支付渠道和银行',
    components: ['渠道适配', '协议转换', '状态同步', '异常处理'],
    icon: CreditCard,
  },
  {
    name: '数据层',
    description: '分布式数据存储和缓存',
    components: ['分库分表', '读写分离', '缓存集群', '数据备份'],
    icon: Database,
  },
];

/**
 * 实施里程碑
 */
const milestones = [
  {
    phase: '需求调研',
    duration: '3周',
    status: 'completed',
    description: '深入了解业务场景，分析现有系统痛点',
    achievements: ['业务需求梳理', '技术方案设计', '架构评审通过'],
  },
  {
    phase: '核心开发',
    duration: '8周',
    status: 'completed',
    description: '开发支付核心引擎和关键业务模块',
    achievements: ['支付引擎完成', '渠道对接完成', '风控系统上线'],
  },
  {
    phase: '渠道集成',
    duration: '6周',
    status: 'completed',
    description: '集成主要支付渠道，完成联调测试',
    achievements: ['30+渠道接入', '联调测试通过', '性能测试达标'],
  },
  {
    phase: '灰度发布',
    duration: '2周',
    status: 'completed',
    description: '小流量灰度验证，监控系统稳定性',
    achievements: ['灰度发布成功', '监控体系完善', '问题快速修复'],
  },
  {
    phase: '全量上线',
    duration: '1周',
    status: 'completed',
    description: '全流量切换，系统正式投产运行',
    achievements: ['全量上线成功', '性能指标达标', '业务运行稳定'],
  },
  {
    phase: '持续优化',
    duration: '持续',
    status: 'ongoing',
    description: '持续监控优化，新功能迭代开发',
    achievements: ['性能持续优化', '新渠道持续接入', '功能持续迭代'],
  },
];

export default function PaymentSystemCasePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-green-50">
      {/* 导航 */}
      <div className="bg-white border-b">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <Link
            href="/cases"
            className="inline-flex items-center text-green-600 hover:text-green-700"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            返回案例列表
          </Link>
        </div>
      </div>

      {/* Hero Section */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="inline-flex items-center px-4 py-2 rounded-full bg-green-100 text-green-700 text-sm font-medium mb-6">
                <CreditCard className="w-4 h-4 mr-2" />
                金融科技 · 支付系统
              </div>
              <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                互联网金融
                <span className="bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
                  支付系统
                </span>
              </h1>
              <p className="text-xl text-gray-600 mb-8">
                某领先金融科技公司采用CActor框架重构支付系统，构建了支持多渠道、高并发的分布式支付处理平台，
                日处理量突破1000万笔，响应时间降低80%，支持50+支付渠道。
              </p>
              <div className="flex flex-wrap gap-3">
                <Badge className="bg-green-100 text-green-700 hover:bg-green-200">
                  <CheckCircle className="w-3 h-3 mr-1" />
                  项目成功
                </Badge>
                <Badge variant="outline">20周交付</Badge>
                <Badge variant="outline">1000万+日处理</Badge>
                <Badge variant="outline">50+支付渠道</Badge>
              </div>
            </div>

            <div className="relative">
              <div className="bg-white rounded-2xl shadow-2xl p-8">
                <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
                  核心业务指标
                </h3>
                <div className="space-y-6">
                  {keyMetrics.map((metric, index) => {
                    const Icon = metric.icon;
                    return (
                      <div
                        key={index}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center">
                          <div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                            <Icon className={`w-5 h-5 ${metric.color}`} />
                          </div>
                          <div>
                            <div className="font-semibold text-gray-900">
                              {metric.label}
                            </div>
                            <div className="text-sm text-gray-500">
                              {metric.before} → {metric.after}
                            </div>
                          </div>
                        </div>
                        <div className={`text-2xl font-bold ${metric.color}`}>
                          ↑{metric.improvement}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 业务场景分析 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              多渠道支付业务场景
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              系统覆盖移动支付、网银支付、企业支付、跨境支付等多种业务场景，
              为数千万用户提供便捷、安全的支付服务。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {paymentScenarios.map((scenario, index) => {
              const Icon = scenario.icon;
              return (
                <Card
                  key={index}
                  className="hover:shadow-lg transition-all duration-300 group"
                >
                  <CardHeader className="text-center pb-4">
                    <div className="w-16 h-16 rounded-2xl bg-gradient-to-r from-green-500 to-emerald-500 flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                      <Icon className="w-8 h-8 text-white" />
                    </div>
                    <CardTitle className="text-lg">{scenario.name}</CardTitle>
                    <div className="text-2xl font-bold text-green-600">
                      {scenario.volume}
                    </div>
                    <CardDescription className="text-sm">
                      交易占比
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <p className="text-gray-600 text-sm leading-relaxed">
                      {scenario.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="font-semibold text-gray-900 text-sm">
                        核心功能：
                      </h4>
                      {scenario.features.map((feature, featureIndex) => (
                        <div
                          key={featureIndex}
                          className="flex items-center text-sm"
                        >
                          <CheckCircle className="w-3 h-3 text-green-500 mr-2" />
                          <span className="text-gray-600">{feature}</span>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* 技术挑战与解决方案 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div>
              <h2 className="text-3xl font-bold text-gray-900 mb-6">
                技术挑战
              </h2>
              <div className="space-y-6">
                {[
                  {
                    title: '高并发处理',
                    description:
                      '需要同时处理数百万用户的支付请求，峰值QPS达到10万+',
                    icon: Users,
                    severity: 'high',
                  },
                  {
                    title: '多渠道集成',
                    description:
                      '需要对接50+支付渠道，每个渠道协议和接口都不同',
                    icon: Network,
                    severity: 'high',
                  },
                  {
                    title: '分布式事务',
                    description: '确保跨多个系统的支付事务一致性和可靠性',
                    icon: Database,
                    severity: 'medium',
                  },
                  {
                    title: '实时风控',
                    description: '毫秒级风险识别和拦截，防范各类支付风险',
                    icon: Shield,
                    severity: 'high',
                  },
                ].map((challenge, index) => {
                  const Icon = challenge.icon;
                  return (
                    <Card
                      key={index}
                      className="border-l-4 border-l-orange-500"
                    >
                      <CardHeader className="pb-3">
                        <div className="flex items-center">
                          <div className="w-8 h-8 rounded-lg bg-orange-100 flex items-center justify-center mr-3">
                            <Icon className="w-4 h-4 text-orange-600" />
                          </div>
                          <CardTitle className="text-lg">
                            {challenge.title}
                          </CardTitle>
                          <Badge
                            variant={
                              challenge.severity === 'high'
                                ? 'destructive'
                                : 'secondary'
                            }
                            className="ml-auto"
                          >
                            {challenge.severity === 'high' ? '高' : '中'}
                          </Badge>
                        </div>
                      </CardHeader>
                      <CardContent>
                        <p className="text-gray-600">{challenge.description}</p>
                      </CardContent>
                    </Card>
                  );
                })}
              </div>
            </div>

            <div>
              <h2 className="text-3xl font-bold text-gray-900 mb-6">
                CActor解决方案
              </h2>
              <div className="space-y-6">
                {[
                  {
                    title: 'Actor并发模型',
                    description:
                      '基于消息传递的Actor模型，实现真正的无锁并发处理',
                    benefits: ['无锁设计', '线性扩展', '故障隔离'],
                  },
                  {
                    title: '微服务架构',
                    description:
                      '将支付系统拆分为多个独立的微服务，提高系统灵活性',
                    benefits: ['服务解耦', '独立部署', '技术多样性'],
                  },
                  {
                    title: '事件驱动',
                    description: '采用事件驱动架构，实现异步处理和最终一致性',
                    benefits: ['异步处理', '削峰填谷', '最终一致'],
                  },
                  {
                    title: '智能路由',
                    description: '基于规则引擎的智能支付路由，优化成功率和成本',
                    benefits: ['智能选择', '成本优化', '成功率提升'],
                  },
                ].map((solution, index) => (
                  <Card key={index} className="border-l-4 border-l-green-500">
                    <CardHeader className="pb-3">
                      <CardTitle className="text-lg flex items-center">
                        <CheckCircle className="w-5 h-5 text-green-600 mr-2" />
                        {solution.title}
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      <p className="text-gray-600">{solution.description}</p>
                      <div className="flex flex-wrap gap-2">
                        {solution.benefits.map((benefit, benefitIndex) => (
                          <Badge
                            key={benefitIndex}
                            variant="secondary"
                            className="text-xs"
                          >
                            {benefit}
                          </Badge>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 系统架构 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              分布式支付系统架构
            </h2>
            <p className="text-lg text-gray-600">
              基于CActor框架的四层架构设计，实现高可用、高性能的分布式支付处理。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {architectureLayers.map((layer, index) => {
              const Icon = layer.icon;
              return (
                <Card key={index} className="hover:shadow-lg transition-shadow">
                  <CardHeader>
                    <div className="flex items-center">
                      <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-green-500 to-emerald-500 flex items-center justify-center mr-4">
                        <Icon className="w-6 h-6 text-white" />
                      </div>
                      <div>
                        <CardTitle className="text-xl">{layer.name}</CardTitle>
                        <CardDescription>{layer.description}</CardDescription>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-2 gap-2">
                      {layer.components.map((component, componentIndex) => (
                        <div
                          key={componentIndex}
                          className="flex items-center p-2 bg-gray-50 rounded text-sm"
                        >
                          <div className="w-2 h-2 rounded-full bg-green-500 mr-2" />
                          {component}
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* 实施过程 */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              项目实施过程
            </h2>
            <p className="text-lg text-gray-600">
              项目历时20周，采用敏捷开发模式，分阶段交付，确保每个里程碑都达到预期目标。
            </p>
          </div>

          <div className="space-y-8">
            {milestones.map((milestone, index) => (
              <div key={index} className="flex items-start">
                <div className="flex-shrink-0 mr-6">
                  <div
                    className={`w-12 h-12 rounded-full flex items-center justify-center ${
                      milestone.status === 'completed'
                        ? 'bg-green-100'
                        : milestone.status === 'ongoing'
                          ? 'bg-blue-100'
                          : 'bg-gray-100'
                    }`}
                  >
                    {milestone.status === 'completed' ? (
                      <CheckCircle className="w-6 h-6 text-green-600" />
                    ) : milestone.status === 'ongoing' ? (
                      <Clock className="w-6 h-6 text-blue-600" />
                    ) : (
                      <div className="w-6 h-6 rounded-full bg-gray-400" />
                    )}
                  </div>
                  {index < milestones.length - 1 && (
                    <div className="w-0.5 h-16 bg-gray-200 ml-6 mt-2" />
                  )}
                </div>

                <div className="flex-1">
                  <Card className="hover:shadow-md transition-shadow">
                    <CardHeader>
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-xl">
                          {milestone.phase}
                        </CardTitle>
                        <Badge variant="outline">{milestone.duration}</Badge>
                      </div>
                      <CardDescription>{milestone.description}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        <h4 className="font-semibold text-gray-900">
                          主要成果：
                        </h4>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                          {milestone.achievements.map(
                            (achievement, achievementIndex) => (
                              <div
                                key={achievementIndex}
                                className="flex items-center text-sm"
                              >
                                <CheckCircle className="w-3 h-3 text-green-500 mr-2" />
                                <span className="text-gray-600">
                                  {achievement}
                                </span>
                              </div>
                            )
                          )}
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 效果展示 */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              项目成果和业务价值
            </h2>
            <p className="text-lg text-gray-600">
              系统上线后显著提升了支付处理能力和用户体验，为公司业务快速发展提供了强有力支撑。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {[
              {
                title: '日处理量',
                value: '1000万+',
                description: '笔交易',
                icon: BarChart3,
                color: 'text-green-600',
              },
              {
                title: '响应时间',
                value: '<100ms',
                description: '平均响应',
                icon: Clock,
                color: 'text-blue-600',
              },
              {
                title: '成功率',
                value: '99.8%',
                description: '支付成功率',
                icon: CheckCircle,
                color: 'text-purple-600',
              },
              {
                title: '用户满意度',
                value: '98%',
                description: '用户好评',
                icon: Users,
                color: 'text-orange-600',
              },
            ].map((stat, index) => {
              const Icon = stat.icon;
              return (
                <Card
                  key={index}
                  className="text-center hover:shadow-lg transition-shadow"
                >
                  <CardContent className="pt-6">
                    <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4">
                      <Icon className={`w-8 h-8 ${stat.color}`} />
                    </div>
                    <div className={`text-3xl font-bold ${stat.color} mb-2`}>
                      {stat.value}
                    </div>
                    <div className="text-sm text-gray-500">
                      {stat.description}
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>

          {/* ROI分析 */}
          <div className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-2xl p-8">
            <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
              投资回报分析
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[
                {
                  title: '收入增长',
                  value: '150%',
                  description:
                    '支付业务收入同比增长150%，主要来自交易量提升和新渠道拓展',
                  icon: TrendingUp,
                },
                {
                  title: '成本节约',
                  value: '30%',
                  description: '通过智能路由和批量处理，显著降低支付渠道成本',
                  icon: DollarSign,
                },
                {
                  title: 'ROI回报',
                  value: '280%',
                  description: '项目投资回报率达到280%，8个月内收回全部投资',
                  icon: Target,
                },
              ].map((roi, index) => {
                const Icon = roi.icon;
                return (
                  <div key={index} className="text-center">
                    <div className="w-16 h-16 rounded-full bg-white shadow-lg flex items-center justify-center mx-auto mb-4">
                      <Icon className="w-8 h-8 text-green-600" />
                    </div>
                    <div className="text-3xl font-bold text-green-600 mb-2">
                      {roi.value}
                    </div>
                    <div className="font-semibold text-gray-900 mb-2">
                      {roi.title}
                    </div>
                    <p className="text-sm text-gray-600">{roi.description}</p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* 客户证言 */}
      <section className="py-16 px-4 bg-gradient-to-r from-green-600 to-emerald-600">
        <div className="max-w-4xl mx-auto text-center text-white">
          <div className="text-6xl mb-6">&ldquo;</div>
          <blockquote className="text-2xl md:text-3xl font-light mb-8 leading-relaxed">
            &ldquo;CActor框架帮助我们构建了业界领先的支付系统。系统上线后，我们的日处理能力
            从200万笔提升到1000万+笔，响应时间降低了80%。更重要的是，系统的稳定性和
            可扩展性为我们的业务快速发展提供了强有力的技术保障。&rdquo;
          </blockquote>
          <div className="flex items-center justify-center">
            <div className="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mr-4">
              <Users className="w-8 h-8" />
            </div>
            <div className="text-left">
              <div className="font-semibold text-lg">李总监</div>
              <div className="opacity-90">技术总监 · 某领先金融科技公司</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
            准备构建您的高性能支付系统？
          </h2>
          <p className="text-xl text-gray-600 mb-8">
            联系我们的专家团队，了解CActor框架如何为您的支付业务带来突破性改进。
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-green-600 hover:bg-green-700">
              联系支付专家
            </Button>
            <Button size="lg" variant="outline">
              下载支付解决方案
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
